<template>
  <div class="cut-img_wrapper">
    <!-- 返回上一页 - start -->
    <div class="go-back-box">
      <span class="back-btn" @click="goBack">
        <mds-icon type="line-arrow-left" />
        <span>返回上一页</span>
      </span>
      <mds-divider></mds-divider>
    </div>
    <!-- 返回上一页 - end -->
    <h3>图片裁剪 - <span>采用vue-cropper</span></h3>
    <div class="app-list_wrapper">
      <div style="display: block; width: 100%">
        <!-- <label class="c-item">
          <span>图片默认渲染方式</span>
          <select v-model="option.mode">
            <option value="contain">contain</option>
            <option value="cover">cover</option>
            <option value="400px auto">400px auto</option>
            <option value="auto 400px">auto 400px</option>
            <option value="50%">50%</option>
            <option value="auto 50%">auto 50%</option>
          </select>
          <section>
            类似css background属性设置 设置不符合规范不生效， 参照文档说明
          </section>
        </label>
        <label class="c-item">
          <span>上传时图片最大大小(默认会压缩尺寸到这个大小)</span>
          <input type="nubmer" v-model="option.maxImgSize" />
        </label>
        <label class="c-item">
          <span>上传图片是否显示原始宽高 (针对大图 可以铺满)</span>
          <input type="checkbox" v-model="option.original" />
          <span>original: {{ option.original }}</span>
        </label> -->
        <label class="c-item">
          <span>是否根据dpr生成适合屏幕的高清图片</span>
          <input type="checkbox" v-model="option.high" />
          <span>high: {{ option.high }}</span>
        </label>
        <!-- <label class="c-item">
          <span>是否输出原图比例的截图</span>
          <input type="checkbox" v-model="option.full" />
          <span>full: {{ option.full }}</span>
        </label> -->
        <label class="c-item">
          <span>截图信息展示是否是真实的输出宽高</span>
          <input type="checkbox" v-model="option.infoTrue" />
          <span>infoTrue: {{ option.infoTrue }}</span>
        </label>
        <label class="c-item">
          <span>能否拖动图片</span>
          <input type="checkbox" v-model="option.canMove" />
          <span>canMove: {{ option.canMove }}</span>
        </label>
        <label class="c-item">
          <span>能否拖动截图框</span>
          <input type="checkbox" v-model="option.canMoveBox" />
          <span>canMoveBox: {{ option.canMoveBox }}</span>
        </label>
        <label class="c-item">
          <span>截图框固定大小</span>
          <input type="checkbox" v-model="option.fixedBox" />
          <span>fixedBox: {{ option.fixedBox }}</span>
        </label>
        <!-- <label class="c-item">
          <span>是否自动生成截图框</span>
          <input type="checkbox" v-model="option.autoCrop" />
          <span>autoCrop: {{ option.autoCrop }}</span>
        </label> -->
        <label class="c-item">
          <span>自动生成截图框的宽高</span>
          <span>宽度: </span
          ><input type="number" v-model="option.autoCropWidth" />
          <span>高度: </span
          ><input type="number" v-model="option.autoCropHeight" />
        </label>
        <label class="c-item">
          <span>截图框是否限制在图片里(只有在自动生成截图框时才能生效)</span>
          <input type="checkbox" v-model="option.centerBox" />
          <span>centerBox: {{ option.centerBox }}</span>
        </label>
        <label class="c-item">
          <span>是否按照截图框比例输出 默认为1 </span>
          <input type="number" v-model="option.enlarge" />
        </label>
        <label class="c-item">
          <span>输出图片格式</span>
          <label
            >jpg
            <input
              type="radio"
              name="type"
              value="jpeg"
              v-model="option.outputType"
          /></label>
          <label
            >png
            <input
              type="radio"
              name="type"
              value="png"
              v-model="option.outputType"
          /></label>
          <label
            >webp
            <input
              type="radio"
              name="type"
              value="webp"
              v-model="option.outputType"
          /></label>
        </label>
      </div>
      <div class="test test1">
        <vueCropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.size"
          :outputType="option.outputType"
          :info="true"
          :full="option.full"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :fixedBox="option.fixedBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :centerBox="option.centerBox"
          :high="option.high"
          :infoTrue="option.infoTrue"
          :maxImgSize="option.maxImgSize"
          @realTime="realTime"
          @imgLoad="imgLoad"
          @cropMoving="cropMoving"
          :enlarge="option.enlarge"
          :mode="option.mode"
          :limitMinSize="option.limitMinSize"
        ></vueCropper>
      </div>
      <div class="test-button">
        <label class="btn" for="uploads">选择图片</label>
        <input
          type="file"
          id="uploads"
          style="display: none"
          accept="image/png, image/jpeg, image/gif, image/jpg"
          @change="uploadImg($event, 1)"
          ref="uploadImg"
        />
        <!-- <button @click="startCrop" v-if="!crap" class="btn">start</button> -->
        <!-- <button @click="stopCrop" v-else class="btn">stop</button> -->
        <!-- <button @click="clearCrop" class="btn">clear</button> -->
        <button @click="refreshCrop" class="btn">刷新</button>
        <button @click="changeScale(1)" class="btn">+</button>
        <button @click="changeScale(-1)" class="btn">-</button>
        <button @click="rotateLeft" class="btn">左旋转</button>
        <button @click="rotateRight" class="btn">右旋转</button>
        <!-- <button @click="finish('base64')" class="btn">预览(base64)</button>
        <button @click="finish('blob')" class="btn">预览(blob)</button> -->
        <button @click="() => (option.img = '')" class="btn">清除图片</button>
        <a @click="down('base64')" class="btn">下载(base64)</a>
        <a @click="down('blob')" class="btn">下载(blob)</a>
        <a :href="downImg" download="demo.png" ref="downloadDom"></a>
      </div>
    </div>
    <!-- model -->
    <!-- <div class="model" v-show="model">
      <div class="model-show" @click="model = false">
        <img :src="modelSrc" alt="" @click="model = false" />
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  name: "cut-img-page",
  data() {
    return {
      model: false,
      modelSrc: "",
      crap: false,
      option: {
        img: "",
        size: 1,
        full: false,
        outputType: "png",
        canMove: true,
        fixedBox: false,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 311,
        autoCropHeight: 232,
        centerBox: false,
        canScale: false,
        high: false,
        cropData: {},
        enlarge: 1,
        mode: "contain",
        maxImgSize: 3000,
        limitMinSize: [100, 120],
      },
      downImg: "#",
    };
  },
  created() {},
  methods: {
    startCrop() {
      // start
      this.crap = true;
      this.$refs.cropper.startCrop();
    },
    stopCrop() {
      //  stop
      this.crap = false;
      this.$refs.cropper.stopCrop();
    },
    clearCrop() {
      // clear
      this.$refs.cropper.clearCrop();
    },
    refreshCrop() {
      // clear
      this.$refs.cropper.refresh();
    },
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    finish(type) {
      // 输出
      if (type === "blob") {
        this.$refs.cropper.getCropBlob((data) => {
          var img = window.URL.createObjectURL(data);
          this.model = true;
          this.modelSrc = img;
        });
      } else {
        this.$refs.cropper.getCropData((data) => {
          this.model = true;
          this.modelSrc = data;
        });
      }
    },
    // 实时预览函数
    realTime(data) {},

    finish2(type) {
      this.$refs.cropper2.getCropData((data) => {
        this.model = true;
        this.modelSrc = data;
      });
    },
    finish3(type) {
      this.$refs.cropper3.getCropData((data) => {
        this.model = true;
        this.modelSrc = data;
      });
    },
    down(type) {
      // event.preventDefault()
      // 输出
      if (type === "blob") {
        this.$refs.cropper.getCropBlob((data) => {
          this.downImg = window.URL.createObjectURL(data);
          if (window.navigator.msSaveBlob) {
            var blobObject = new Blob([data]);
            window.navigator.msSaveBlob(blobObject, "demo.png");
          } else {
            this.$nextTick(() => {
              this.$refs.downloadDom.click();
            });
          }
        });
      } else {
        this.$refs.cropper.getCropData((data) => {
          this.downImg = data;
          if (window.navigator.msSaveBlob) {
            var blobObject = new Blob([data]);
            window.navigator.msSaveBlob(blobObject, "demo.png");
          } else {
            this.$nextTick(() => {
              this.$refs.downloadDom.click();
            });
          }
        });
      }
    },

    uploadImg(e, num) {
      //上传图片
      // this.option.img
      var file = e.target.files[0];
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
        return false;
      }
      var reader = new FileReader();
      reader.onload = (e) => {
        let data;
        if (typeof e.target.result === "object") {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]));
        } else {
          data = e.target.result;
        }
        if (num === 1) {
          this.option.img = data;
        } else if (num === 2) {
          this.example2.img = data;
        }
        this.$refs.uploadImg.value = "";
      };
      // 转化为base64
      // reader.readAsDataURL(file)
      // 转化为blob
      reader.readAsArrayBuffer(file);
    },
    imgLoad(msg) {
      console.log(msg);
    },

    cropMoving(data) {
      this.option.cropData = data;
    },
    goBack() {
      this.$router.replace("/process");
    },
  },
};
</script>

<style lang="scss" scoped>
.cut-img_wrapper {
  color: #000;
  h3 {
    padding: 12px 0 20px 0;
    span {
      font-size: 14px;
    }
  }
  .app-list_wrapper {
    .content {
      margin: auto;
      max-width: 1200px;
      margin-bottom: 100px;
    }

    .test-button {
      display: flex;
      flex-wrap: wrap;
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      cursor: pointer;
      background: #fff;
      border: 1px solid #c0ccda;
      color: #1f2d3d;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      margin: 20px 10px 0px 0px;
      font-size: 14px;
      border-radius: 4px;
      color: #fff;
      background-color: #50bfff;
      border-color: #50bfff;
      transition: all 0.2s ease;
      text-decoration: none;
      user-select: none;
    }

    .test {
      height: 500px;
    }

    .model {
      position: fixed;
      z-index: 10;
      width: 100vw;
      height: 100vh;
      overflow: auto;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.8);
    }

    .model-show {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
      text-align: center;
    }

    .model img {
      display: block;
      margin: auto;
      max-width: 80%;
      width: auto;
      user-select: none;
      background-position: 0px 0px, 10px 10px;
      background-size: 20px 20px;
      background-image: linear-gradient(
          45deg,
          #eee 25%,
          transparent 25%,
          transparent 75%,
          #eee 75%,
          #eee 100%
        ),
        linear-gradient(
          45deg,
          #eee 25%,
          white 25%,
          white 75%,
          #eee 75%,
          #eee 100%
        );
    }

    .c-item {
      display: block;
      padding: 10px 0;
      user-select: none;
    }

    .pre {
      display: flex;
      flex-wrap: wrap;
    }

    .pre-item {
      padding-right: 20px;
    }
  }
}
</style>
